<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  MdiAccount,
  MdiDownload,
  MdiHome,
  MdiMenuOutlined,
  MdiThemeLightDark,
  MdiUpload,
  MidCloseOutlined,
} from '@vben/icons';
import { preferencesManager, usePreferences } from '@vben/preferences';
import { useAccessStore } from '@vben/stores';

import { History, SettingConfig } from '@icon-park/vue-next';

// 移动端菜单状态
const router = useRouter();
const { isDark } = usePreferences();
const accessStore = useAccessStore();

// Mobile menu state
const mobileMenuOpen = ref(false);

// Navigation configuration
const navigation = [
  {
    name: '主页',
    path: '/file',
    icon: MdiHome,
  },
  {
    name: '上传',
    path: '/upload',
    icon: MdiUpload,
  },
  {
    name: '下载',
    path: '/download',
    icon: MdiDownload,
  },
  {
    name: '取件',
    path: '/share',
    icon: History,
  },
];

// Computed properties
const isLogin = computed(() => {
  return accessStore.isAccessChecked && accessStore.accessToken;
});

// Methods
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value;
};

const toggleTheme = () => {
  const newMode = isDark.value ? 'light' : 'dark';
  preferencesManager.updatePreferences({
    theme: {
      ...preferencesManager.getPreferences().theme,
      mode: newMode,
    },
  });
};

const handleUserAction = () => {
  if (accessStore.isAccessChecked && accessStore.accessToken) {
    router.push('/user-info');
  } else {
    // 未登录用户，跳转到登录页面
    router.push('/login');
  }
};

const handleSettingConfig = () => {
  router.push('/workspace');
};
</script>

<template>
  <div
    class="bg-background min-h-screen transition-colors duration-300"
    :data-theme="isDark ? 'dark' : 'light'"
  >
    <!-- Desktop Vertical Navigation -->
    <nav class="fixed left-0 top-0 z-50 hidden h-screen w-16 lg:block">
      <div class="flex h-full w-full flex-col items-center">
        <!-- 主题切换按钮放在顶部 -->
        <button
          @click="toggleTheme"
          class="text-muted-foreground hover:text-foreground mt-4 flex h-12 w-12 items-center justify-center rounded-lg text-xl transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800"
          title="切换主题"
        >
          <MdiThemeLightDark class="size-6" />
        </button>

        <!-- 分隔线 -->
        <div class="my-4 h-px w-8 bg-gray-300 dark:bg-gray-600"></div>

        <!-- 导航菜单 -->
        <TabList
          id="desktop-menu"
          class="m-0 flex w-full flex-1 flex-col items-center justify-center gap-4 p-0"
          orientation="vertical"
          appearance="transparent"
          :activeid="$route.path"
        >
          <Tab
            v-for="item in navigation"
            :key="item.name"
            :id="item.path"
            class="m-0 p-0"
            @click="router.push(item.path)"
          >
            <router-link
              :to="item.path"
              class="text-muted-foreground hover:text-foreground flex h-12 w-12 items-center justify-center rounded-lg text-xl transition-all duration-300 hover:bg-gray-100 dark:hover:bg-gray-800"
              :class="{
                'text-primary bg-primary/10 scale-110':
                  $route.path === item.path,
              }"
            >
              <component :is="item.icon" class="size-6" />
            </router-link>
          </Tab>
        </TabList>

        <!-- Bottom Section: User Controls -->
        <div class="flex flex-col items-center gap-4">
          <div class="h-px w-8 bg-gray-300 dark:bg-gray-600"></div>

          <button
            @click="handleUserAction"
            class="group flex h-12 w-12 items-center justify-center rounded-xl text-xl transition-all duration-300 hover:scale-110 hover:bg-gray-100 hover:shadow-lg dark:hover:bg-gray-800"
            :title="isLogin ? '用户信息' : '登录'"
            :aria-label="isLogin ? '用户信息' : '登录'"
          >
            <MdiAccount
              class="text-muted-foreground group-hover:text-foreground size-6 transition-colors"
            />
          </button>

          <button
            v-if="isLogin"
            @click="handleSettingConfig"
            class="group flex h-12 w-12 items-center justify-center rounded-xl text-xl transition-all duration-300 hover:scale-110 hover:bg-gray-100 hover:shadow-lg dark:hover:bg-gray-800"
            title="工作区设置"
            aria-label="工作区设置"
          >
            <SettingConfig
              class="text-muted-foreground group-hover:text-foreground size-6 transition-colors"
            />
          </button>
        </div>
      </div>
    </nav>

    <!-- Mobile Header -->
    <header
      class="fixed left-0 top-0 z-50 flex w-full items-center justify-between p-4 lg:hidden"
    >
      <button
        @click="toggleMobileMenu"
        class="bg-background/80 text-foreground flex h-12 w-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-110 hover:shadow-xl"
        aria-label="打开菜单"
      >
        <MdiMenuOutlined class="size-6" />
      </button>

      <button
        @click="toggleTheme"
        class="bg-background/80 text-foreground flex h-12 w-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-110 hover:shadow-xl"
        title="切换主题"
        aria-label="切换主题"
      >
        <MdiThemeLightDark class="size-6" />
      </button>
    </header>

    <!-- Mobile Menu Overlay -->
    <transition
      enter-active-class="transition-all duration-500 ease-out"
      leave-active-class="transition-all duration-500 ease-in"
      enter-from-class="opacity-0 scale-95"
      leave-to-class="opacity-0 scale-95"
    >
      <div
        v-if="mobileMenuOpen"
        class="bg-background/95 fixed inset-0 z-40 flex h-screen w-full flex-col items-center justify-center gap-6 p-4 backdrop-blur-sm lg:hidden"
        @click.self="mobileMenuOpen = false"
      >
        <button
          @click="mobileMenuOpen = false"
          class="bg-accent text-foreground absolute right-4 top-4 flex h-12 w-12 items-center justify-center rounded-xl shadow-lg transition-all duration-300 hover:scale-110 hover:shadow-xl"
          aria-label="关闭菜单"
        >
          <MidCloseOutlined class="size-6" />
        </button>

        <div class="flex w-full max-w-sm flex-col gap-4">
          <router-link
            v-for="item in navigation"
            :key="item.path"
            :to="item.path"
            class="bg-accent text-foreground flex w-full items-center justify-center rounded-xl p-4 text-xl font-medium shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
            :class="{
              'bg-primary text-primary-foreground': $route.path === item.path,
            }"
            @click="mobileMenuOpen = false"
          >
            <component :is="item.icon" class="mr-3 size-6" />
            {{ item.name }}
          </router-link>
        </div>

        <div class="mt-6 flex gap-4">
          <button
            @click="(handleUserAction(), (mobileMenuOpen = false))"
            class="bg-accent text-foreground flex h-12 w-12 items-center justify-center rounded-xl shadow-lg transition-all duration-300 hover:scale-110 hover:shadow-xl"
            :aria-label="isLogin ? '用户信息' : '登录'"
          >
            <MdiAccount class="size-6" />
          </button>

          <button
            v-if="isLogin"
            @click="(handleSettingConfig(), (mobileMenuOpen = false))"
            class="bg-accent text-foreground flex h-12 w-12 items-center justify-center rounded-xl shadow-lg transition-all duration-300 hover:scale-110 hover:shadow-xl"
            aria-label="工作区设置"
          >
            <SettingConfig class="size-6" />
          </button>
        </div>
      </div>
    </transition>

    <!-- Main Content Container -->
    <main
      class="relative min-h-screen w-full transition-all duration-300 lg:pt-0"
      :class="{
        'px-[clamp(1rem,5vw,4rem)] py-6':
          $route.path !== '/login' && $route.path !== '/register',
      }"
    >
      <router-view v-slot="{ Component }">
        <transition
          enter-active-class="transition-all duration-500 ease-out"
          leave-active-class="transition-all duration-300 ease-in"
          enter-from-class="opacity-0 translate-y-4 scale-95"
          leave-to-class="opacity-0 -translate-y-4 scale-95"
          mode="out-in"
        >
          <component :is="Component" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<style scoped>
/* stylelint-disable order/order */

/* Backdrop blur fallback */
@supports not (backdrop-filter: blur(12px)) {
  .backdrop-blur-sm {
    background-color: rgb(255 255 255 / 95%);
  }

  .dark .backdrop-blur-sm {
    background-color: rgb(0 0 0 / 95%);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print styles */
@media print {
  nav,
  header {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
    margin-left: 0 !important;
  }
}

/* Navigation Animation Effects */
.group:hover {
  --tw-shadow-color: rgb(59 130 246);
}

.dark .group:hover {
  --tw-shadow-color: rgb(96 165 250);
}

/* Custom scrollbar for mobile menu */
:deep(.overflow-y-auto) {
  scrollbar-color: rgb(156 163 175) transparent;
  scrollbar-width: thin;
}

:deep(.overflow-y-auto::-webkit-scrollbar) {
  width: 4px;
}

:deep(.overflow-y-auto::-webkit-scrollbar-track) {
  background: transparent;
}

:deep(.overflow-y-auto::-webkit-scrollbar-thumb) {
  background-color: rgb(156 163 175);
  border-radius: 2px;
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgb(59 130 246);
  outline-offset: 2px;
}

/* stylelint-enable order/order */
</style>
